{% block sw_dynamic_url_field %}
<div class="sw-dynamic-url-field">
    {% block sw_dynamic_url_field_content %}
    <div class="sw-dynamic-url-field_link-category">
        {% block sw_dynamic_url_field_content_type %}
        <mt-select
            :model-value="linkCategory"
            :label="$tc('sw-text-editor-toolbar.link.labelType')"
            required
            :options="linkCategoryOptions"
            @update:model-value="onSelectFieldChange"
        />
        {% endblock %}

        {% block sw_dynamic_url_field_content_type_inputs %}
        {% block sw_dynamic_url_field_content_type_inputs_link %}

        <mt-text-field
            v-if="linkCategory === 'link'"
            v-model="linkTarget"
            :label="$tc('sw-text-editor-toolbar.link.linkTo')"
            :placeholder="$tc('sw-text-editor-toolbar.link.placeholder')"
        />
        {% endblock %}

        {% block sw_dynamic_url_field_content_type_inputs_phone %}

        <mt-text-field
            v-else-if="linkCategory === 'phone'"
            v-model="linkTarget"
            :label="$tc('sw-text-editor-toolbar.link.linkTo')"
            :placeholder="$tc('sw-text-editor-toolbar.link.placeholderPhoneNumber')"
        />
        {% endblock %}

        {% block sw_dynamic_url_field_content_type_inputs_email %}
        <mt-email-field
            v-else-if="linkCategory === 'email'"
            v-model="linkTarget"
            :label="$tc('sw-text-editor-toolbar.link.linkTo')"
            :placeholder="$tc('sw-text-editor-toolbar.link.placeholderEmail')"
        />
        {% endblock %}

        {% block sw_dynamic_url_field_content_type_inputs_detail %}
        <sw-entity-single-select
            v-else-if="linkCategory === 'detail'"
            v-model:value="linkTarget"
            class="sw-dynamic-url-field__entity-single-select"
            should-show-active-state
            display-variants
            entity="product"
            :criteria="entityFilter"
            :label="$tc('sw-text-editor-toolbar.link.linkTo')"
            :placeholder="$tc('sw-text-editor-toolbar.link.placeholderProduct')"
            show-clearable-button
        />
        {% endblock %}

        {% block sw_dynamic_url_field_content_type_inputs_category %}
        <sw-category-tree-field
            v-else-if="linkCategory === 'navigation'"
            :label="$tc('sw-text-editor-toolbar.link.linkTo')"
            :criteria="entityFilter"
            :placeholder="$tc('sw-text-editor-toolbar.link.placeholderCategory')"
            :categories-collection="categoryCollection"
            single-select
            @selection-add="replaceCategorySelection"
            @selection-remove="removeCategorySelection"
        />
        {% endblock %}

        {% block sw_dynamic_url_field_content_type_inputs_media %}
        <sw-media-field
            v-else-if="linkCategory === 'media'"
            v-model:value="linkTarget"
            :label="$tc('sw-text-editor-toolbar.link.linkTo')"
            :criteria="entityFilter"
            single-select
        />
        {% endblock %}
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_dynamic_url_field_button_remove %}
    <mt-button
        class="sw-dynamic-url-field__link-menu-buttons-button-remove"
        variant="critical"
        ghost
        size="small"
        :disabled="!linkTarget"
        @click="removeLink"
    >
        {{ $tc('global.default.remove') }}
    </mt-button>
    {% endblock %}
</div>
{% endblock %}
